<!DOCTYPE html>
<html>
<head>
<title>Cell Tracker</title>
<meta charset="utf-8">
<!--script src="http://weapp.googlecode.com/svn/api/weapp.min.js"></script-->
<script src="../../WeApp.js"></script>
<style type="text/css">
body {
    font-size: smaller;
}
input[type=text] {
    width: 100%;
    border: solid 1px gray;
}
#cid {
    margin-bottom: 5px;
}
p {
    text-align: center;
}
#locate {
    cursor: pointer;
    width: 150px;
}
</style>

<script>
CellTracker = top.Weiran.Class(WeApp, {
    // for internationalization
    dictionaries: {
        'en': {
            'cid': 'Cell ID',
            'lac': 'Location area code',
            'locate': 'Locate',
            'error': 'Oops, failed to locate this cell tower.'
        },
        'zh-CN' : {
            'cid': '基站号',
            'lac': '小区号',
            'locate': '定位',
            'error': '糟糕，基站定位失败。'
        }
    },

    // OpenLayers.Layer.Vector
    layer: null,

    initialize: function (options) {
        WeApp.prototype.initialize.apply(this, arguments);
        
        // set language
        top.jQuery('#cidLabel', document).text(this.i18n('cid'));
        top.jQuery('#lacLabel', document).text(this.i18n('lac'));
        top.jQuery('#locate', document).val(this.i18n('locate'));

        this.layer = new top.OpenLayers.Layer.Vector(this.getTitle());
        this.getMap().addLayer(this.layer);
    },

    run: function () {
        WeApp.prototype.run.apply(this, arguments);

        // add event handlers
        top.jQuery("#locate", document).click(top.Weiran.Function.bind(this.onLocate, this));
    },

    destroy: function () {
        this.getMap().removeLayer(this.layer);
        this.layer.destroy();
        this.layer = null;
        
        WeApp.prototype.destroy.apply(this, arguments);
    },
    
    onLocate: function(evt) {
        // get cid and lac
        top.jQuery.get('http://www.4007111115.com:8080/mps', {
            lac: top.jQuery('#lac', document).val(),
            cid: top.jQuery('#cid', document).val()
        }, (function(app) { return function(data) {
            // lat, lon
            if (typeof data === 'string') {
                var ll = data.split(',');
                if (ll.length == 2) {
                    app.drawLocation({lon:ll[1], lat:ll[0]});
                } else {
                    alert(data);
                }
            } else {
                alert(data);
            }
        }})(this), 'text').error( (function(app) { return function() {
            alert(app.i18n('error'));
        }})(this) );
    },
    
    drawLocation: function (lonlat) {
        var ll = new top.OpenLayers.LonLat(lonlat.lon, lonlat.lat).transform(
            this.getMap().displayProjection,
            this.getMap().getProjectionObject()
        );
        
        this.layer.removeAllFeatures();
        this.layer.addFeatures([
            new top.OpenLayers.Feature.Vector(
                new top.OpenLayers.Geometry.Point(ll.lon, ll.lat),
                {},
                {
                    graphicName: "cross",
                    strokeColor: "red",
                    strokeWidth: 2,
                    fillOpacity: 0,
                    pointRadius: 10
                }
            ),
            new top.OpenLayers.Feature.Vector(
                top.OpenLayers.Geometry.Polygon.createRegularPolygon(
                    new top.OpenLayers.Geometry.Point(ll.lon, ll.lat),
                    10000,
                    40,
                    0
                ),
                {},
                {
                    fillColor: 'blue',
                    fillOpacity: 0.1,
                    strokeWidth: 0
                }
            )
        ]);
        
        this.getMap().zoomToExtent(this.layer.getDataExtent());
    },
    
    CLASS_NAME: "CellTracker"
});

function main(options) {
    var app = new CellTracker(options);
    app.run();
}
</script>
</head>

<body>
    <label for="cid" id="cidLabel" >Cell ID</label><br />
    <input type="text" id="cid" />
    <br />
    <label for="lac" id="lacLabel">Location area code</label><br />
    <input type="text" id="lac" />
    <p><input type="button" id="locate" value="Locate"/></p>
</body>
</html>
